<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .father{
            width: 400px;
            height: 400px;
            background-color: purple;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <script>
        // 所谓事件流，其实就是我们从页面中接收事件的顺序

        // 事件流有三个阶段，分别是：捕获阶段、当前目标阶段、冒泡阶段
        // 说白了，比如你在页面上点击一个div，那么浏览器会有一个定位的过程，它会从document --> html --> body --> div 这样一层一层的找到你所点击的那个div，这个过程就是捕获阶段。然后就是当前目标阶段，最后再顺着刚才的路走回去，这就叫冒泡阶段。

        // 其实很多人都不知道，addEventListener有第三个参数，是个布尔值，true代表捕获阶段，false代表冒泡阶段, 不传默认false
        let son = document.querySelector('.son');
        let father = document.querySelector('.father');

        // 你会发现，如果你点击son这个div，控制台会先触发son的点击事件，再触发father的，因为addEventListener不传第三个布尔值的话，就是默认回调函数在冒泡阶段执行。
        // father.addEventListener('click',()=>{
        //     console.log('谁点爹');
        // })
        // son.addEventListener('click',()=>{
        //     console.log('谁点儿子');
        // })

        // 你会发现，如果你给addEventListener加了第三个参数且为true，回调函数就会执行在捕获阶段，所以这时候你点击son，先在控制台打印的是father。
        father.addEventListener('click',()=>{
            console.log('谁点爹');
        },true)
        son.addEventListener('click',()=>{
            console.log('谁点儿子');
        },true)
    </script>
</body>

</html>